<template>
  <div>
    <van-loading v-if="!flag" type="spinner" color="#D4473C" />
    <div class="right_center" ref="right">
      <ul class="toplist">
        <li class="item" v-for="(item, index) in list" :key="index">
          <div class="img">
            <router-link :to="'/rank/ranklist?id=' + item.id">
              <img :src="item.coverImgUrl" alt="" />
            </router-link>
          </div>
          <ul class="sing">
            <li v-for="(key, i) in item.tracks" :key="i" v-show="i < 3" @click="rankSong(key.id)">
              {{ i + 1 }}.{{ key.name }} - {{ key.ar[0].name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getToplist, getPlaylistDetail } from "../api/rank";
import BScroll from "@better-scroll/core";

export default {
  data() {
    return {
      list: [],
      flag: false,
    };
  },
  beforeRouteEnter(to, from, next) {
    // 页面在渲染前获取数据
    getToplist().then((data) => {
      // 这里没有this的概念，所以要使用vm调用
      // console.log(this);
      // next();//跳转路由
      // 指定methods数据方法 调用方法
      next((vm) => vm.getPlaylistDetailFun(data.list));
    });
  },
  methods: {
    getPlaylistDetailFun(list) {
      let num = 1;
      for (let i = 0; i < list.length; i++) {
        let id = list[i].id;
        // console.log("歌单列表",list);
        getPlaylistDetail({ id }).then((data) => {

          this.list.push(data.playlist);
          num++;
          if (num == list.length) {
            this.flag = true;
          }
        });
      }
    },
     // 滚动效果初始化方法
    _initScroll() {
      // 右侧滚动效果初始化
      this.rights = new BScroll(this.$refs.right, {
        click: true, //点击触发
        probeType: 3, //深针的效果，时时获取滚动高度
      });
      // console.log(this.$refs.right);
    },
     rankSong(id){
       console.log("这是排行id",id);
       this.$emit("rankSong", { id: id, newMuics: true });
  }
  },
  // components: {
  //   BScrollRank,
  // },
   // 页面挂载后生命周期函数
  // 引入第三方js库
  // vue页面加载慢，第三方js库提前加载问题?
  // vm.$nextTick() 方法 保证vue执行完，页面挂载数据后，再执行第三方库   
  mounted() {
    this.$nextTick(() => {
      // setTimeout(() => {
      this._initScroll();
      // }, 3000);
    });
  },
  created() {
    // 页面渲染后获取数据
    // getTopList().then(data=>{
    //     // console.log(data);
    //     for(let i = 0;i < data.list.length;i++){
    //         let id = data.list[i].id;
    //         getPlaylistDetail({id}).then(data=>{
    //             console.log(data.playlist)
    //             this.lists.push(data.playlist);
    //         })
    //     }
    // })
  },
};
</script>

<style lang="less" >
.right_center {
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto;
  width: 100%;
  // 这里设置定位和高度是为了让这个元素的高度等于页面的高度减去top值的高度
  // 注意一定要设置底部为0
  position: absolute;
  top: 80px;
  bottom: 0px;
  // 这是为了滚动时隐藏溢出
  overflow: hidden;
}
.toplist {
  margin-top: 5px;
  .item {
    margin: 0px 8px;
    padding: 2px 0;
    border-bottom: 1px solid #e1e2e2;
    height: 90px;
    display: flex;
    .img {
      width: 90px;
      height: 90px;
      flex: 0 0 90px;
      margin-right: 18px;
      // background-color: skyblue;
      border-radius: 2px;
      img {
        vertical-align: middle;
        width: 100%;
        height: 100%;
      }
    }
    .sing {
      flex: 1;
      margin-top: 4px;
      li {
        height: 27px;
        line-height: 27px;
        font-size: 12px;
        color: #1b1b28;
        overflow: hidden;
      }
    }
  }
}
.van-loading {
  margin-top: 50px;
  text-align: center;
}
</style>